<template>
  <div class="container">
    <Sidebar></Sidebar>
    <div class="box">
      <div class="header">
        <img :src="messages.artist.cover" alt="" class="img" />
        <div class="header-mes">
          <div class="name">{{ this.messages.artist.name }}</div>
          <div class="identyfy">{{ this.messages.identify.imageDesc }}</div>
          <div class="achived">
            <div class="music">
              单曲 <i>{{ this.messages.artist.musicSize }}</i>
            </div>
            <span>|</span>
            <div class="album">
              专辑 <i>{{ this.messages.artist.albumSize }}</i>
            </div>
            <span>|</span>
            <div class="mv">
              MV<i> {{ this.messages.artist.mvSize }}</i>
            </div>
          </div>
          <div class="btn">
            <div class="btn1"><i class="el-icon-video-play"></i> 播放</div>
            <button class="btn2"><i class="el-icon-plus"></i> 关注 65441.4万</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { resSingerMessage } from "@/api";
import Sidebar from "@/components/Sidebar";
export default {
  name: "message",
  components: {
    Sidebar,
  },
  data() {
    return {
      messages: {
        //姓名与头像
        artist: {
          cover: "",
          name: "",
          //mv
          mvSize: "",
          //专辑数量
          albumSize: "",
          //音乐数量
          musicSize: "",
        },
        //歌曲
        secondaryExpertIdentiy: [],

        //身份
        identify: {
          imageDesc: "",
        },
      },
    };
  },
  mounted() {
    // console.log(this.$route.query );
    this.getSingerMessage();
    // console.log(this.messages.musicSize);
  },
  methods: {
    async getSingerMessage() {
      await resSingerMessage(this.$route.query.id)
        .then((res) => {
          // console.log(res.data);
          //对象不可遍历
          this.messages = res.data.data;
          console.log(this.messages, "message");
          console.log(this.messages.artist.alias, "信息");
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>


<style lang="less" scoped>
.container {
  .box {
    background: rgb(240, 231, 231);
    .header {
      display: flex;
      padding: 2em 6em;
      .img {
        width: 13em;
        height: 13em;
        border-radius: 50%;
      }
      .header-mes {
        margin-left: 3em;
        margin-top: 2em;
        font-size: 1.1em;
        .name {
          font-size: 2em;
          margin-bottom: 0.5em;
        }
        .identyfy {
          margin-bottom: 0.5em;
        }

        .achived {
          display: flex;
          font-size: 1.2em;
          .music {
          }
          .album {
          }
          .mv {
          }
          span {
            margin: 0em 1em;
            font-size: 1.5em;
            color: rgb(199, 186, 186);
          }
          i {
            font-size: 1.5em;
          }
        }
        .btn {
          margin-top: 0.6em;
          display: flex;
          .btn1 {
            margin-right: 1em;
            text-align: center;
            padding: 0.3em;
            width: 7em;
            color: white;
            background: rgba(206, 5, 5,0.8);
          }
          .btn2 {
            padding: 0.3em;
          }
        }
      }
    }
  }
}
</style>